import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:situation/app/theme/gaps.dart';
import 'package:situation/resources/assets.dart';
import 'package:situation/widgets/mk_load_image.dart';

class MapDropdown extends StatefulWidget {
  const MapDropdown({super.key, this.onPointDraw, this.onLineDraw, this.onAreaDraw, this.onMeasureDistance, this.onMeasureArea, this.onClean, required this.handleMyMark});
  final GestureTapCallback? onPointDraw;
  final GestureTapCallback? onLineDraw;
  final GestureTapCallback? onAreaDraw;
  final GestureTapCallback? onClean;
  final GestureTapCallback? onMeasureDistance;
  final GestureTapCallback? onMeasureArea;
  final Function handleMyMark;

  @override
  State<MapDropdown> createState() => _MapDropdownState();
}

class _MapDropdownState extends State<MapDropdown> {
  _buildItem(icon, title, onTap) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        child: Row(
          children: [
            MkLoadImage(icon, width: 20),
            Gaps.hGap4,
            Text(title, style: TextStyle(color: Colors.white)),
          ],
        ),
      ),
    );
  }

  _buildMenuItem(text, onTap,{icon = ""}) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        alignment: Alignment.center,
        width: double.infinity,
        decoration: BoxDecoration(
        ),
        padding: EdgeInsets.all(10),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            icon != "" ? MkLoadImage(icon, width: 14) : SizedBox.shrink(),
            Gaps.hGap8,
            Text(text, style: TextStyle(color: Colors.white))
          ],
        ),
      ),
    );
  }

  bool _pointShow = false;
  bool _measureShow = false;

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Column(
        children: [
          Container(
            margin: EdgeInsets.only(top: 20),
            width: Get.width * 0.94,
            height: 40,
            padding: EdgeInsets.only(left: 15, right: 15),
            decoration: BoxDecoration(
              color: Colors.black.withAlpha(100),
              borderRadius: BorderRadius.all(Radius.circular(4)),
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                _buildItem(Assets.mapMark, "标记", () {
                  setState(() {
                    _pointShow = !_pointShow;
                    _measureShow = false;
                  });
                }),
                _buildItem(Assets.mapRuler, "测量", () {
                  setState(() {
                    _pointShow = false;
                    _measureShow = !_measureShow;
                  });

                }),
                _buildItem(Assets.mapUserMark, "我标记的", () {
                  widget.handleMyMark();
                }),
              ],
            ),
          ),
          Gaps.vGap4,
          _pointWidget(),
          _measureWidget(),

        ],
      ),
    );
  }

  _measureWidget(){
    return AnimatedSwitcher(
      duration: Duration(milliseconds: 300),
      transitionBuilder: (Widget child, Animation<double> animation) {
        return SizeTransition(
          axisAlignment: 1.0,
          sizeFactor: animation,
          child: FadeTransition(opacity: animation, child: child),
        );
      },
      child:
      _measureShow
          ? Center(
        child: Container(
          key: ValueKey('menu1'),
          clipBehavior: Clip.hardEdge,
          width: Get.width * 0.94,
          padding: EdgeInsets.only(left: 15, right: 15),
          decoration: BoxDecoration(
            color: Colors.black.withAlpha(100),
            borderRadius: BorderRadius.all(Radius.circular(4)),
          ),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              _buildMenuItem("测距", () {
                hidePanel();
                widget.onMeasureDistance?.call();
              }),
              _buildMenuItem("测面", () {
                hidePanel();
                widget.onMeasureArea?.call();
              }),
            ],
          ),
        ),
      )
          : SizedBox.shrink(key: ValueKey('empty')),
    );
  }

  _pointWidget(){
    return AnimatedSwitcher(
      duration: Duration(milliseconds: 300),
      transitionBuilder: (Widget child, Animation<double> animation) {
        return SizeTransition(
          axisAlignment: 1.0,
          sizeFactor: animation,
          child: FadeTransition(opacity: animation, child: child),
        );
      },
      child:
      _pointShow
          ? Center(
        child: Container(
          key: ValueKey('menu'),
          clipBehavior: Clip.hardEdge,
          width: Get.width * 0.94,
          padding: EdgeInsets.only(left: 15, right: 15),
          decoration: BoxDecoration(
            color: Colors.black.withAlpha(100),
            borderRadius: BorderRadius.all(Radius.circular(4)),
          ),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              _buildMenuItem("点绘制", () {
                hidePanel();
                widget.onPointDraw?.call();
              } , icon: Assets.mapPoint),
              _buildMenuItem("线绘制", () {
                hidePanel();
                widget.onLineDraw?.call();
              }, icon: Assets.mapLine),
              _buildMenuItem("面绘制", () {
                hidePanel();
                widget.onAreaDraw?.call();
              }, icon: Assets.mapArea),

              _buildMenuItem("清空全部", () {
                hidePanel();
                widget.onClean?.call();
              }, icon: Assets.mapClear),
            ],
          ),
        ),
      )
          : SizedBox.shrink(key: ValueKey('empty')),
    );
  }


  hidePanel(){
    setState(() {
      _pointShow= false;
      _measureShow =false;
    });
  }
}
